<template>
  <div class="hello">
    <el-container style="height: 95%; border: 1px solid #eee">
      <!--   <el-aside width="200px"
                style="background-color: rgb(238, 241, 246);text-align:center ">
         <el-menu :default-openeds="['1', '3']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>导航一</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>导航二</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu> 
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-setting"></i>文件类型</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="3-1">选项1</el-menu-item>
              <el-menu-item index="3-2">选项2</el-menu-item>
            </el-menu-item-group>
             <el-menu-item-group title="分组2">
              <el-menu-item index="3-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="3-4">
              <template slot="title">选项4</template>
              <el-menu-item index="3-4-1">选项4-1</el-menu-item>
            </el-submenu> 
          </el-submenu>
        </el-menu>
      </el-aside> -->

      <el-container>
        <el-header style="text-align: right; text-align:center;font-size: 12px">
          <!-- <el-dropdown>
            <i class="el-icon-setting"
               style="margin-right: 15px"></i>
            <span>文件信息</span>
            <el-dropdown-menu slot="dropdown"
                              style="text-align:right;">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
          <el-select v-model="value8"
                     filterable
                     placeholder="文件类型">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
          <el-col :span="12">
            <el-autocomplete class="inline-input"
                             v-model="state2"
                             :fetch-suggestions="querySearch"
                             placeholder="请输入内容"
                             :trigger-on-focus="false"
                             @select="handleSelect"></el-autocomplete>
          </el-col>
        </el-header>

        <el-main>
          <el-table :data="tableData">
            <el-table-column prop="updateDate"
                             label="日期"
                             :formatter="dateFormat"
                             width="170">
            </el-table-column>
            <el-table-column prop="fileName"
                             label="文件名"
                             width="120">
            </el-table-column>
            <el-table-column prop="fileType"
                             label="类型"
                             width="120">
            </el-table-column>
            <el-table-column prop="fileSize"
                             label="大小">
            </el-table-column>
            <el-table-column fixed="right"
                             label="操作"
                             width="100">
              <template slot-scope="scope">
                <el-button @click="downLoad(scope.row)"
                           type="text"
                           size="small">下载</el-button>
                <el-button type="text"
                           size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
    <el-upload class="upload-class"
               drag
               action="Api/file/upLoad"
               :on-success="handleAvatarSuccess"
               multiple
               :show-file-list="false">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
  </div>
</template>

<script>
import ajaxContacts from "../api/contacts.js";
// import qs from 'qs'
import axios from "axios";

export default {
  name: 'HelloWorld',
  data() {
    const item = {
      updateDate: '2016-05-02',
      fileName: '王小虎',
      fileType: '上海市普陀区金沙江路 1518 弄',
      fileUrl: '123',
      fileSize: 'token'
    };
    return {
      tableData: [],
      pageIndex: 1,
      pageSize: 20,
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value8: '',
      restaurants: [],
      state1: '',
      state2: ''
    }
  },
  methods: {
    downLoad(event) {
      console.log(event);
      //下载文件
      window.location.href = event.fileUrl; // 本窗口打开下载
        //   this.$axios.get(event.fileUrl)
        // .then(res => {
        //             this.$message.error('正在下载');
        // })
        // .catch(error => {
        //   console.log(error);
        //    this.$message.error('下载失败');
        // })
      // this.$axios({
      //   method: 'get',
      //   url: this.HOST + '/file/downLoad',
      //   data: this.qs.stringify({    //这里是发送给后台的数据
      //     userId: 1,
      //     token: 2,
      //   })
      // }).then((response) => {          //这里使用了ES6的语法
      //   console.log(response)       //请求成功返回的数据
      // }).catch((error) => {
      //   console.log(error)       //请求失败返回的数据
      // })
      // ajaxContacts.$ajaxDownloadFile({
      //           userId: this.userId,
      //            token: this.token,
      //     }).then(res=> {
      //         console.log(res.data)
      //         this.frequentList= res.data      
      //     }).catch(err => {
      //         console.log(err)
      //     })
    },
    dateFormat: function (row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return date;
    }  ,

    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    loadAll() {
      return [
        { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
      ];
    },
    handleAvatarSuccess(res, file) {
      if (res == 'ok') {
        this.$message({
          message: '上传成功',
          type: 'success'
        });
      } else {
        this.$message.error('上传失败');
      }

    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    queryAll() {
      this.$axios.get(this.HOST + '/file/queryAll' + '?pageIndex=' + this.pageIndex + '&pageSize=' + this.pageSize)
        .then(res => {
          this.tableData = res.data.data
          console.log(tableData);
          // this.offset = this.offset+12
        })
        .catch(error => {
          console.log(error);
        })
    }
  },
  created() {
    this.queryAll();
  },
  mounted() {
    this.restaurants = this.loadAll();
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>
